<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<HEAD>
     <TITLE>Background-Color - Cascading Style Sheets Properties</TITLE>
     <link rel="stylesheet" type="text/css" href="../../../ss/2.css" id="thecss">
     <script type="text/javascript" src="../../../scripts/csschange.js"></script>
</HEAD>

<BODY onload="readSS()">

<br>
<center>
<table border=3 cellpadding=5 cellspacing=0>
<tr>
    <td rowspan=2><h1 class="pagetitle">background-color</h1>
    <b><a href="../../../misc/suppkey.htm">Support Key:</a></b> 
    [<b><i class="fs">CSS1</i></b>|<b class="s">CSS2</b>|<b class="s">CSS2.1</b>] 
    [<b class="s">IE4B1</b>|<b><i class="fs">N4B2</i></b>|<b class="s">O3.5</b>|<b class="s">S1</b>]<br></td>
    <td colspan=2 align=center><b class="alert">Other Color/Background Properties</b><br></td>
</tr>
<tr>
    <td><a href="color.htm">color</a><br>
        <a href="lbgcolor.htm">layer-background-color</a><br>
        <a href="lbgcolor.htm">layer-background-color</a><br>
        <a href="bg.htm">background</a><br>
        <a href="bgimage.htm">background-image</a><br></td>
    <td><a href="bgrepeat.htm">background-repeat</a><br>
        <a href="bgattach.htm">background-attachment</a><br>
        <a href="bgposit.htm">background-position</a><br>
        <a href="bgpositx.htm">background-position-x</a><br>
        <a href="bgposity.htm">background-position-y</a><br></td>
</tr>
<tr><td align=center colspan=3>
<font size=2>= <span class="sitetitle">Index DOT Css</span> by <a 
href="../../../misc/email.htm">Brian Wilson</a> =</font><br>
</td></tr>
</table>
</center>

<div align="center">
<table cellpadding=5 cellspacing=0>
<tr>
    <td>&#160;&#160;<font size=2><a href="../../index.html">Main Index</a> |
        <a href="../../propindex/font.htm">Property Index</a> |
        <a href="../../supportkey/syntax.htm">CSS Support History</a> |
        <a href="../../../history/browsers.htm">Browser History</a></font>&#160;&#160;</td>
</tr>
</table>
</div>
<hr size=1 align="center" width="25%">

<br><br>
<table border=1 cellspacing=0 cellpadding=5>
<tr><td>
<table border=0 cellspacing=0 >
<tr>
    <th colspan=3 valign=bottom class="field"><big><u><b
        class="colheaders">&#160;&#160;&#160;Quick Statistics&#160;&#160;&#160;</b></u></big><br></th>
</tr>
<tr><th align=left><b class="l3heading">Default Value: </b><br></th>
    <td rowspan=6>&nbsp;&nbsp;</td>
    <td><b class="alert">transparent</b></td></tr>
<tr><th align=left><b class="l3heading">Applicable Elements: </b><br></th>
    <td>All</td></tr>
<tr><th align=left><b class="l3heading">Inherit From Parent: </b><br></th>
    <td>No</td></tr>
<tr><th align=left><b class="l3heading">Applicable Media: </b><br></th>
    <td>Visual</td></tr>
<tr><th align=left valign=top><b class="l3heading">HTML Equivalent: </b><br></th>
    <td>&lt;<b class="tagname">body|table|thead|tbody|tfoot|th|td</b>
        <span class="tagattrib">BGCOLOR</span>=&quot;#RRGGBB&quot;&gt;</td></tr>
<tr><th align=left valign=top><b class="l3heading">Official Docs: </b><br></th>
    <td><a href="http://www.w3.org/TR/REC-CSS1#background-color">CSS1: Sect. 5.3.2</a><br>
        <a href="http://www.w3.org/TR/REC-CSS2/colors.html#background-properties">CSS2: Sect. 14.2.1</a>,
        <a href="http://www.w3.org/TR/CSS21/colors.html#background-properties">CSS2.1: Sect 14.2.1</a></td></tr>
</table>
</td></tr>
</table>

<dl>
<dt><big><b class="mainheading">What is it?</b></big>
    <dd>This value sets the background color for the current element.
        A 'background-color' can be specified either alone or in conjunction with a
        'background-image'. When used with a background image, it can still serve
        several purposes: 1) to fill transparent regions of the background image,
        2) for display while the background image is loading, 3) the browser has
        image loading capability turned off, and 4) if the background image display
        settings will not cover all of the browser display area. All the standard
        <a href="../../syntax/units/color.htm">Color Units</a> specification methods apply here.
</dl>

<dl>
<dt><br><big><b class="mainheading">Allowed Values</b></big>
<dt><b class="subheading">inherit</b></dt>
<dt>[<b><i class="fs">CSS2</i></b>|<b class="s">CSS2.1</b>] 
    [<b class="s">N6</b>|<b><i class="fs">O4</i></b>|<b class="s">S1</b>]</dt>
    <dd><b class="l3heading">Type:</b> Explicit</dd>
    <dd><b class="l3heading">Description:</b><br>
        Explicitly sets the value of this property to that of the parent.</dd>

<dt><b class="subheading">[color]</b></dt>
<dt>[<b><i class="fs">CSS1</i></b>|<b class="s">CSS2</b>|<b class="s">CSS2.1</b>] 
    [<b class="s">IE4B1</b>|<b><i class="fs">N4B2</i></b>|<b class="s">O3.5</b>|<b class="s">S1</b>]</dt>
    <dd><b class="l3heading">Type:</b> Explicit</dd>
    <dd><b class="l3heading">Description:</b><br>
        This is a representation of the values for Red/Green/Blue used to
        determine a final display color. Please see the section on
        <a href="../../syntax/units/color.htm">Color Units</a> for details on the
        various color specification schemes.</dd>

<dt><b class="subheading">transparent</b></dt>
<dt>[<b><i class="fs">CSS1</i></b>|<b class="s">CSS2</b>|<b class="s">CSS2.1</b>] 
    [<b class="s">IE4B1</b>|<b><i class="fs">N4B2</i></b>|<b class="s">O3.5</b>|<b class="s">S1</b>]</dt>
    <dd><b class="l3heading">Type:</b> Explicit</dd>
    <dd><b class="l3heading">Description:</b><br>
        This specifies that the parent element background/image will shine through 
        if one exists, else the system default background/image value is used.</dd>
</dl>

<dl>
<dt><big><b class="mainheading">Example</b></big>
    <dd><div class="example">Ext/Doc: <b class="selector">body</b> {
        <span class="property">background-color:</span> blue }</div>
    <dd><div class="example">In-Line:&#160; &lt;<b class="tagname">body</b> <span
        class="tagattrib">STYLE</span>=&quot;<span class="property">background-color:</span>
        blue&quot;&gt;text&lt;/<b class="tagname">body</b>&gt;</div>
</dl>

<big><b class="mainheading">Browser Peculiarities</b></big>
<ul>
    <li><b class="alert">Internet Explorer</b>
        <dl>
            <dd><b class="alert2">4.0:</b>
            <dd>- This property does not apply to checkbox and radio form fields
                (input type=checkbox|radio) and HR elements.
            <dd><b class="alert2">4.0+:</b>
            <dd>- This property applies to all elements (including individual
                OPTION elements - only 'color' and 'background-color' apply to
                individual OPTION elements in IE4+.)
            <dd><b class="alert2">5.0+:</b>
            <dd>- This property now applies to checkbox and radio form fields
                (input type=checkbox|radio) and HR elements.
            <dd><b class="alert2">5.5+:</b>
            <dd>- Beginning in 5.5 Beta 1 the "transparent" value can now apply
                to frame and IFRAME elements.
        </dl>
    <li><b class="alert">Netscape</b>
        <dl>
            <dd><b class="alert2">4.0 Beta 2:</b>
            <dd>- Using a value of 'transparent' shades an element a little darker
                than the parent element color.
            <dd><b class="alert2">4.x:</b>
            <dd>- Applying this property to LI elements, only applies the
                background-color to the marker within an OL list. In a UL list
                the property has no effect at all.
            <dd>- Using "transparent" as a value for this property with table cells
                (TD/TH) turns the background to black, not to transparent.
            <dd>- This property does not have an effect on form elements, DT/DD,
                images or HR elements,
            <dd>- This property DOES have an effect on checkbox and radio form fields
                (input type=checkbox|radio.)
            <dd>- The "transparent" value uses the background-color of the BODY
                element, not the value of the parent element.
            <dd>- Applying this property to tables does not cover the table border area.
            <dd>- This property does not apply to the padding area unless a 'border'
                property is also applied.
            <dd>- Applying this property to double-justified text (the 'text-align'
                property "justify" value) only applies the effect to the word content
                and normal spacing between them. Extra justification spacing uses the
                background-color of the parent element.
            <dd><b class="alert2">4.5:</b>
            <dd>- Previous versions did not understand background properties applied
                to the HTML element, but in 4.5 the background color is applied -
                only to the text content and not the entire BODY background.
        </dl>
    <li><b class="alert">Opera</b>
        <dl>
            <dd><b class="alert2">3.5:</b>
            <dd>- This property does not apply to form fields or the HTML element.
        </dl>
</ul>

<br><br>
<a href="../../../misc/copyright.htm">Boring Copyright Stuff....</a>
<br>

</BODY>
</HTML>